<template>
  <div class="subpage">
    <myhead title="选择城市" :back="true"></myhead>
    <van-index-bar class="textleft">
      <div v-for="(l, i) in pylist" :key="i">
        <van-index-anchor :index="l" />
        <van-cell
          v-for="(itme, index) in cityList.filter(
            (v) => v.pinyin.indexOf(l.toLowerCase()) == 0
          )"
          :key="index"
          :title="itme.name"
          @click="changeCityItme(itme)"
        ></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pylist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        // "U",
        // "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.city) {
      next();
    } else {
      this.$toast("请选择城市后再离开");
      next(false);
    }
  },
  methods: {
    changeCityItme(city) {
      console.log(city);
      this.changeCity(city);
      this.$router.go(-1);
    },
  },
  created() {
    if (!this.cityList.length > 0) {
      //数据不存在才去请求
      this.$ajax
        .getMaiData(
          {
            k: 2431353,
              k:5389252,
          },
          {
            "X-Host": "mall.film-ticket.city.list",
          }
        )
        .then((res) => {
          this.changeCityList(res.data.cities);
        });
    }
  },
};
</script>
<style>
.textleft {
  text-align: left;
}
</style>